<template>
	<view class="activity-box">
		<view class="activity-box-top">
			<view class="view" :class="{'active':tabIdx== index}" v-for="(item,index) in tabList" :key="index" @click="checkTab(index)">{{item}}</view>
		</view>
		<view class="activity-box-btm">
			<scroll-view
				scroll-y="true" 
				refresher-enabled="true"
			    @refresherrefresh="onRefresh"
			    @scrolltolower="loadMore" 
			    :refresher-triggered="isRefreshing"
			    style="height: 100%"
				v-if="form.dataList&&form.dataList.length > 0"
			>
				<view class="activity-list-item" v-for="(item, index) in form.dataList" :key="index">
					<view class="activity-list-item-top">
						<view class="activity-list-text">
							<span class="activity-tag" v-if="item.onOff == 1">线上</span>
							<span class="activity-tag" v-if="item.onOff == 2">线下</span>
							<span class="span-2">{{item.name}}</span>
							<image v-if="form.status == 1" :src="$imgUrl + '/personal/qr-code-small.png'" class="image" @click.native.stop="showQrcode(item)" mode=""></image>
						</view>
						<view class="activity-list-time">
							<view>活动时间：{{timestamp(item.beginTime)}}-{{timestamp(item.endTime)}}</view>
							<view class="act-copy">
								<view>地址：{{item.address}}</view>
								<span @click.native.stop="getClipboard(item.address)">复制</span>
							</view>
						</view>
					</view>
					<view class="activity-list-item-btm">
						<view>报名时间: {{timestamp(item.enrollBegin)}}-{{timestamp(item.enrollEnd)}}</view>
						<span v-if="form.status == 1" class="status-wait">待核销</span>
						<span v-if="form.status == 2" class="status-success">已核销</span>
						<span v-if="form.status == 3" class="status-fail">已失效</span>
					</view>
				</view>
			</scroll-view>
			<view v-else>
				<u-empty mode="data" icon="https://www.mescroll.com/img/mescroll-empty.png"></u-empty>
			</view>
		</view>
	</view>
	<!-- 弹窗 -->
	<uni-popup ref="actpoup" type="center" background-color="rgba(0,0,0,0)">
		<view class="act-poup">
			<image :src="qrCode.url" class="image" mode=""></image>
			<view class="view">核销码：{{qrCode.num}}</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app"
	import { getActivity } from '@/common/API/landlord';
	import dayjs  from "dayjs"
	
	const tabList = reactive(['待核销','已核销','已失效'])
	const qrCode = reactive({
		url: null,
		num: null
	})
	const tabIdx = ref(0)
	const actpoup = ref(false)
	const isRefreshing= ref(false)
	const isLoadMore = ref(false)
	
	const form = reactive({
		pageNo: 1,
		pageSize: 10,
		page:1,
		dataList: [],
		status: 1
	})
	//切换tab
	const checkTab = (index) => {
		tabIdx.value = index
		form.status = index + 1
		getList()
	}
	//处理时间戳
	const timestamp = (val:any,s) => {
		return !s ? dayjs(val).format('YYYY-MM-DD') : dayjs(val).format('YYYY-MM-DD HH:mm:ss')
	}
	const onRefresh = () => {
		form.pageNo = 1
		form.pageSize = 10
		isRefreshing.value = true;
		getList()
		setTimeout(() => {
		    isRefreshing.value = false;
		    uni.stopPullDownRefresh()
		}, 500)
	}
	const showQrcode = (item:any) => {
		qrCode.url = item.imageCodeStr
		qrCode.num = item.verifyCode
		actpoup.value.open()
	}
	const getList = async () =>{
		let data = {
			pageNo: form.pageNo,
			pageSize: form.pageSize,
			status: form.status
		}
		let res = await getActivity(data)
		if(res){
			form.dataList = res.list
		}
	}
	onLoad(()=>{
		getList()
	})
	//加载更多
	const loadMore = () => {
		console.log('上拉加载更多')
		if(form.pageNo >= form.page){
			return
		}
		form.pageNo ++
		isLoadMore.value = true;
		getList()
		setTimeout(() => {
			isLoadMore.value = false;
		}, 2000)
	}
	//复制
	const getClipboard = (value:string) => {
		uni.setClipboardData({
			data: value,
			success: function () {
				console.log('success');
			}
		});
	}
</script>
<style>
	page{
		height: 100%;
		overflow: hidden;
	}
</style>
<style lang="scss" scoped>
	.activity-box{
		display: flex;
		flex-direction: column;
		height: 100%;
		padding-bottom: 20rpx;
	}
	.activity-box-top{
		display: flex;
		border-bottom: 1px solid rgba(229, 229, 229, 1);
		.view{
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			color: rgba(102, 102, 102, 1);
		}
		.view.active{
			color: rgba(253, 150, 24, 1);
			position: relative;
			&::before{
				content: " ";
				position: absolute;
				left: 50%;
				transform: translateX(-24rpx);
				bottom: 0;
				width: 48rpx;
				height: 4rpx;
				border-top: 4rpx solid rgba(253, 150, 24, 1);
			}
		}
	}
	.activity-box-btm{
		flex: 1;
		overflow: hidden;
		.activity-list-item{
			border-radius: 8rpx;
			background: rgba(255, 255, 255, 1);
			margin: 32rpx;
			padding: 32rpx;
			.activity-list-text{
				color: rgba(77, 77, 77, 1);
				font-size: 28rpx;
				display: flex;
				align-items: center;
				.activity-tag{
					padding:0 20rpx;
					display: inline-block;
					color: #fff;
					border-radius: 4rpx;
					font-size: 40rpx;
					background: rgba(253, 150, 24, 1);
					transform: scale(0.5);
					margin: 10rpx 0 0 -30rpx;
					position: relative;
					top: -4rpx;
				}
				.span-2{
					margin-left: -20rpx;
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.image{
					width: 32rpx;
					height: 32rpx;
					padding: 10rpx;
				}
			}
			.activity-list-time{
				border-bottom: 1rpx solid rgba(229, 229, 229, 1);
				padding-bottom: 24rpx;
				.act-copy{
					display: flex;
					align-items: center;
					&>view{
						flex: 1;
					}
					span{
						color: rgba(253, 150, 24, 1);
						display: inline-block;
					}
				}
			}
			.activity-list-item-btm{
				color: rgba(0, 0, 0, 1);
				padding-top: 32rpx;
				display: flex;
				align-items: center;
				&>view{
					flex: 1;
				}
				.status-wait{
					color: rgba(49, 113, 232, 1);
				}
				.status-success{
					color: rgba(73, 201, 124, 1);
				}
				.status-fail{
					color: rgba(248, 83, 75, 1);
				}
			}
		}
	}
	.act-poup{
		padding: 46rpx 76rpx;
		border-radius: 16rpx;
		background: #fff;
		text-align: center;
		.image{
			width: 410rpx;
			height: 400rpx;
		}
		.view{
			
		}
	}
</style>